<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 作用域 Scope： 变量和函数的可访问范围。
        // ===> 作用域控制着变量和函数的可见性 和 生命周期。 

        // 1. 全局作用域
        // 直接写在script或者JS代码（单独的JS文件），属于全局作用域

        // 可见性： 全局作用域中声明的变量，在代码的任何地方都可以访问
        // 生命周期：伴随着页面的生命周期（页面关闭，销毁）

        const num = 10
        function fn() {
            // 函数内部
            console.log(num)
        }
        fn()

        // eg2 
        // 函数内部，如果不使用任何关键字声明变量，那么这个变量会变成window的属性
        function bar() {
            abc = 100
        }
        bar()
        console.log(abc)

        // 2. 局部作用域（函数作用域）
        // ==> 在函数内部声明的变量只能在函数内部访问，外部无法访问

        // 可见性：函数外部不能访问函数内部的变量
        // 生命周期：变量在函数调用执行后，就会销毁（清空/回收）
        function foo() {
            const abc = 666
            console.log(abc)
        }
        foo()
    </script>
</body>

</html>